<template>
  <div>
    <v-chart-pie :options="option" style="height:17vh;" />
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/component/legend'
// import 'echarts/lib/component/tooltip'

export default {
  components: {
    'v-chart-pie': ECharts
  },
  props: {
    industryData: {
      type: Array,
      default() {
        return []
      }
    },
    typeData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
    industryData(val) {
      let data1 = []
      let legend1 = []
      for( let i = 1; i < val.length; i++ ) {
        data1.push({
          value: val[i].num,
          name: val[i].title
        })
        legend1.push(val[i].title)
      }

      this.option.legend[0].data = legend1
      this.option.series[0].data = data1
      console.log(this.option.legend[0])
    },
    typeData(val) {
      let data2 = []
      let legend2 = []
      for( let i = 1; i < val.length; i++ ) {
        data2.push({
          value: val[i].num,
          name: val[i].title
        })
        legend2.push(val[i].title)
      }

      this.option.legend[1].data = legend2
      this.option.series[1].data = data2
      console.log(this.option.legend[1])
    }
  },
  created() {
    //
  },
  mounted() {
    let option = {
        // title: {
        //     text: '园区产业分布',
        //     subtext: '园区产业分布',
        //     left: 'center'
        // },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: [
            {
              show: true,
              type: 'scroll',
              orient: 'vertical',
              right: 320,
              top: 10,
              bottom: 20,
              data: [],
              icon: 'circle',
              textStyle: {
                color: '#ffffff',
                fontSize: 8
              }
            },
            {
              show: true,
              type: 'scroll',
              orient: 'vertical',
              right: 70,
              top: 10,
              bottom: 20,
              data: [],
              icon: 'circle',
              textStyle: {
                color: '#ffffff',
                fontSize: 8
              }
            }
        ],
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        series: [
            {
                // name: '国企',
                type: 'pie',
                radius: [20, 48],
                center: ['18%', '40%'],
                roseType: 'radius',
                label: {
                    show: true,
                    formatter: function (params) {   //格式化函数
                      return `${params.value}`
                    },
                    textStyle: {
                      color: '#B0CEFC',
                      fontSize: 10
                    }
                },
                data: []
            },
            {
                // name: '外资',
                type: 'pie',
                radius: [20, 48],
                center: ['58%', '40%'],
                roseType: 'area',
                label: {
                  show: true,
                  formatter: function (params) {   //格式化函数
                    return `${params.value}`
                  },
                  textStyle: {
                    color: '#B0CEFC',
                    fontSize: 10
                  }
                },
                data: []
            }
        ]
    }
    this.option = option
  },
  data() {
    return {
      option: {}
    }
  }
}
</script>
